<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登录</title>
</head>
	<!-- 网页图标 -->
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">

<!--build:css ./public/css/main.css-->
<!-- 引入初始化样式 -->
<link rel="stylesheet" href="./public/css/base.css">
<!-- 引入首页样式 -->
<link rel="stylesheet" href="./public/css/index.css" >
<!--endbuild-->
<!-- 引入Jquery -->
<script src="./public/js/jquery.min.js"></script>

    <style>
		body {
			background-color: #F7F7F7;
		}
		.together {
			width: 800px;
			margin: 50px auto;
			background-color: #FFF;
			border: 1px solid #ccc;
			border-radius: 5px;
		}
		
		.together .choose {
			width: 100%;
			/*height: 300px;*/
			margin: 10px auto;
			text-align: center;
			height: 50px;
			line-height: 50px;
		}


		ul {
			margin: 0;
			padding:50px;
			padding-top: 0;
		}

		li {
			display: flex;
			margin: 20px 0;
		}

		li span {
			min-width: 200px;
			font-size: 12px;
			line-height: 46px;
			float: left;
			text-align:center;
			opacity: 0.3

		}

		input,label{
			display: block;
			float: left;
			height: 46px;
			font-size: 23px;
			box-sizing: border-box;
			color: #333;
		}

		label {
			width: 200px;
			line-height: 46px;
			margin-right: 30px;
			text-align: right;
			font-weight: 700;
		}

		input {
			width: 320px;
			padding: 8px;
			border: 1px solid #cccccc;
			outline: none;
			/*text-align: center;*/

		}

		input.code {
			width: 120px;
		}
		
		input.verify {
			width: 190px;
			margin-left: 10px;
			background-color: red;
			color:#fff;
			text-align: center;
			
		}
		
		/*input.submit {
			background-color: red;
			color: #fff;
		}*/
		input[type=button] {
			border: none;
			color: #fff;
			background-color: #E64145;
			border: 4px;
			cursor: pointer;

		}   
		
		

		.tips {
			/*固定定位*/	
			position: fixed;
			top:0;
			width: 100%;
			height: 40px;
			text-align: center;
			display: none;

		} 

		.tips p {
			min-width: 300px;
			max-width: 400px;			
			margin: 0 auto;
			line-height: 40px;
			color: #fff;
			background-color: #C91623;

		}
		
		</style>
<body>

	<div class="together">
		<div class="choose"><h1>校园快讯后台管理登录</h1></div>


		
						<!-- 登录 -->
						<div class="login">
						<form action="">
							<ul>
								<li>
										<label for="username">用户名</label>
										<input type="text" id="username" class="username">
								</li>
								<li>
										<label for="psw">密码</label>
										<input type="password" id="psw" class="psw" >
								</li>
								 <li>
								        <label for=""></label>
								        <input type="button" class="loginBtn" value="登录">
						        </li>
							</ul>
						</form>
						</div>

		
	</div>
	<!-- 提示信息 -->
	<div class="tips">
		<p>输入有误</p>
	</div>

</body>
<script>
 
$(function(){

 //登录
    // 校验逻辑
    // 1.注意判断所有文本是否为空
    // 2.校验
    //    2.1校验用户名
    //    2.2校验密码

    $('.loginBtn').on('click',function(){
    		// 1.判断是否为空
			if(  $('.psw').val() == '' || $('.username').val() == ''){
    			if($('.username').val() == ""){
    				$('.tips p').html('用户名不能为空！');
    				$('.tips').fadeIn(1000).delay(1000).fadeOut(1000);
    				return;
    			}
    			else if($('.psw').val() == ""){
    				$('.tips p').html('密码不能为空!');
    				$('.tips').fadeIn(1000).delay(1000).fadeOut(1000);
    				return ;
    			}
    			return;
    		}

    		//满足要求 发送ajax请求
    		$.ajax({
    			'url':"http://120.78.92.190/CommunityUnion/public/v2/auth/manager/get_token",
    			'type':"POST",
    			// 把json数据转换为json对象
    			'dataType':"json",
    			'data':{
    				//用户名
    				"username":$('.username').val(),
    				//密码
    				"password":$('.psw').val(),
    			},
    			'success':function(data){
					// console.log(`message=${data.message}`,`code=${data.code}`);

					// 登录成功
					if(data.code == 200){
						var user_token = data.data.token;
						console.log(user_token)
                        document.cookie="user_token="+user_token;
                        $('.tips p').html('登录成功，请稍后...');
						$('.tips').fadeIn(1000).delay(1000).fadeOut(1000);
						setTimeout(function(){
							window.location.href = "./index.html";
								},3000)

					}else{
					// 登录失败
					$('.tips p').html(`登录失败!`);
					$('.tips').fadeIn(1000).delay(1000).fadeOut(1000);
					}
    			}

    		})
//        $.ajax({
//            type:"GET",
//            url: 'http://120.79.18.188/api/v1/admin/article/list',
//            dataType:"jsonp",
//            jsonp: 'callback',
//             beforeSend: function(xhr) {
//                      console.log("1")
//                      xhr.setRequestHeader("Authorization",  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6IjEifQ==.838a31f45466dbdcb4b8f0ed14322bb4df392fd0365126af73d4cc13680035b6")
//                  },
//            success: function (data) {
//                console.log(data)
//            },
//            error: function (data) {
//                console.error(data)
//            }
//        })
    })
	// 2.1校验用户名
			function isUser(str){
				reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
				// console.log(reg.test(str))
				if( !reg.test(str)){
					return false;
				}
				return true;
			}
			// isUser('a123456'	)
			//2.2校验密码 以字母开头，长度在6~18之间，只能包含字母、数字和下划线
			function isPsw(str){
				reg = /^[a-zA-Z]\w{5,17}$/;
				// console.log(reg.test(str))
				if(!reg.test(str)){
					return false;
				}
				return true;
			}


})
</script>
</html>